<template>
    <div class="yaohf">
        <div :class="[isShowSearch?'sear':'']"  >
            <SearchForm v-if="isShowSearch" ></SearchForm>
        </div>
        <div class="box-card1">
            <div class="table-header">
                <div class="header-botton-if">
                    <slot name="tableHeader"></slot>
                </div>
                <div class="header-button-ri">
                    <el-button :icon="Refresh" circle> </el-button>
                    <el-button :icon="Printer" circle> </el-button>
                    <el-button :icon="Operation" circle> </el-button>
                    <el-button :icon="Search" @click="isShowSearch=!isShowSearch" circle> </el-button>
                </div>
            </div>

            <el-table :data="tableData" border style="width: 100%;height: 100%;"  table-layout="auto" @selection-change="allSelectData">
                <el-table-column fixed type="selection" width="50" align="center" />

                <el-table-column prop="id" show-overflow-tooltip label="#" width="80" align="center" />
                <el-table-column label="状态" show-overflow-tooltip prop="state" width="120" align="center">
                    <template #default="{ row }">
                        {{ row.state == 0 ? "待分配" : row.state == 1 ? "处理中" : row.state == 2 ? "已完结" : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="作品类型" show-overflow-tooltip prop="type" width="120" align="center">
                    <template #default="{ row }">
                        {{ row.type == 1 ? "文字" : row.type == 2 ? "图片" : row.type == 3 ? "视频" : "" }}
                    </template>
                </el-table-column>
                <el-table-column label="用户名" show-overflow-tooltip prop="my.username" width="120" align="center" />
                <el-table-column label="任务编号" show-overflow-tooltip prop="taskId" width="120" align="center" />
                <el-table-column label="审核状态" show-overflow-tooltip prop="examine" width="120" align="center">
                    <template #default="{ row }">
                        {{ row.examine == 0 ? "待审核" : row.examine == 1 ? "审核中" : row.examine == 2 ? "通过" : "" }}
                    </template>
                </el-table-column>

                <el-table-column label="发布地点" show-overflow-tooltip prop="site" width="180" align="center" />
                <el-table-column label="发布时间" show-overflow-tooltip prop="createTime" width="160" align="center" />
                <el-table-column label="当前处理人" show-overflow-tooltip prop="staff.staffName" width="120" align="center" />
                <el-table-column label="处理人编号" show-overflow-tooltip prop="staff.identity.employeeNo" width="150"
                    align="center" />
                <el-table-column label="职位" show-overflow-tooltip prop="staff.identity.job" width="100" align="center">
                    <template #default="{ row }">
                        {{ row.staff?.identity.job == "0" ? "系统开发人员" : row.staff?.identity.job == "1" ? "经理"
                            : row.staff?.identity.job == "2" ? "项目负责人" : row.staff?.identity.job == "3" ? "组长" :
                                row.staff?.identity.job == "4" ? "质检" : row.staff?.identity.job == "5" ? "审核员" : "" }}
                    </template>
                </el-table-column>
                <el-table-column />
                <el-table-column fixed="right" label="操作" align="center" width="120">
                    <template #default>
                        <el-button type="primary">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagin">
                <div class="pagin-left">
                    <template v-if="isShowSelectInfo">
                        <el-button type="primary" @click="pushData" :disabled="dataLen > 0 ? false : true" :icon="Delete"
                            plain>
                            批量转交
                        </el-button>
                        <div class="mar">
                            共选了<span class="a">{{ dataLen }}</span>项数据
                        </div>
                    </template>
                </div>
                <Pagination :pageTotalSize="pageTotalSize"></Pagination>
            </div>
        </div>

    </div>

    <TaskDialog ref="taskDialogRef"></TaskDialog>
</template>

<script setup>
import SearchForm from "@/components/SearchForm/index.vue";
import Pagination from "../Protable/Pagination/index.vue";
import TaskDialog from "../taskDialog/index.vue"
import {
    Refresh,
    Printer,
    Operation,
    Search,
    CirclePlus,
    Delete,
    EditPen,
    Download,
    Upload,
    View,
} from "@element-plus/icons-vue";
// import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
import { ref, computed, watchEffect,onMounted } from "vue"
import { worksData } from "@/stores/worksData.js"
// import {staffData} from "@/stores/staff.js"
// import {mainStore} from "@/stores"
// let mStaff = staffData()
// let mStore = mainStore()


let taskDialogRef = ref()
let isShowSearch = ref(true)

let mWorks = worksData()
let props = defineProps({
    teamTaskData: {
        type: Array,
        default: []
    },
    isShowSelectInfo:{
        type:Boolean,
        default:true
    }
})

let isShowSelectInfo = computed(()=>{
    return props.isShowSelectInfo
})

// 分页的页数
let pageTotalSize = ref(0)

let selectData = ref([])


// const tableData = [
//     {
//         id:1,
//         type:2,
//         username:"yaohf",
//         createTime:"2016-05-01",
//         site:"广西壮族自治区南宁市",
//         examine:"0",
//         taskId:"2002020070",
//         teamId:"1",
//         state:"0",
//         // 处理人的名字
//         staffName:"要花费",
//         //员工编号
//         employeeNo:"1355762398742",
//         job:"1"

//     },
// ]

// 批量选择的回调

const tableData = computed(() => {
    return props.teamTaskData
})

watchEffect(() => {
    pageTotalSize.value = mWorks.count
})

// 选择数据
let allSelectData = (e) => {
    // console.log(e, "批量选择了数据")
    selectData.value = e
}

let dataLen = computed(() => {
    return selectData.value.length
})

//批量转交数据
let pushData = () => {
    // console.log("批量转交")
    taskDialogRef.value.openDialog(selectData.value)

}

// // 获取自己团队中的员工
// let  getOwnTeamMember =()=>{
//     let obj = {
//         staffId:mStore.userinfo.staffId
//     }
//     mStaff.getOwnteamMemberData(obj)
// }

//  onMounted(()=>{
//     getOwnTeamMember()
//  })

</script>

<style lang="scss" scoped>
.yaohf {
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 142px);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto 1fr ;

    .box-card1 {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        flex-direction: column;
        // flex: 1;
        background-color: #fff;
        padding: 10px;
        .table-header{
            display: flex;
            justify-content: space-between;
        }
        .table-header {
            margin-bottom: 20px;

            .el-table {
                height: 100%;
            }
        }
    }
    .sear {
        margin-bottom: 10px;
    }
}





.pagin {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .pagin-left {
        display: flex;
        align-items: center;
        font-size: 14px;

        .mar {
            margin-left: 20px;

            .a {
                // margin: 0 4px;
            }
        }
    }
}
</style>